<template>
    <div class="line-chare">
        <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button @click="search">查询</el-button>
        <lineChart :xdata="xdata" :ydata="ydata"></lineChart>
    </div>
</template>

<script>
import lineChart from '@/components/line/lineChart.vue'

import { orderordertotal } from '@/api/account.api'
import dayjs from 'dayjs'
export default {
    components: { lineChart },
    data() {
        return {
            xdata: [],
            ydata: [
                { name: '订单金额', data: [] }
            ],
            date: []
        }
    },
    methods: {
        search() {
            const date = JSON.stringify(this.date.map(item => dayjs(item).format('YYYY-MM-DD HH:mm:ss')))
            orderordertotal(date).then((res) => {
                console.log(res);
                this.xdata = res.data.data.map(item => dayjs(item.orderTime).format('YYYY-MM-DD HH:mm'))
                this.ydata[0].data = res.data.data.map(item => item.orderAmount)
                // console.log(this.xdata);
            })
        }
    },
    created() {
        orderordertotal().then((res) => {
            console.log(res);
            this.xdata = res.data.data.map(item => dayjs(item.orderTime).format('YYYY-MM-DD HH:mm'))
            this.ydata[0].data = res.data.data.map(item => item.orderAmount)
            // console.log(this.xdata);
        })
    }
}
</script>

<style lang="less" scoped>
.line-chare {
    // height: 500px;
    height: 100%;
    background-color: #fff;
}
</style>